<template>
  <div class="app-container">
    <div class="message_push_box">
      <div class="view-title">消息推送</div>
      <div class="search_box">
        <div>
          <el-select v-model="searchType" placeholder="请选择推送方式">
            <el-option
              v-for="item in typeOptions"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="search_btn">
          <el-button type="primary" @click="handleSearch">搜索</el-button>
        </div>
      </div>
      <!-- 新增 -->
      <div class="add_box">
        <el-button type="primary" @click="handleAdd">新增</el-button>
      </div>
      <div class="table_box">
        <el-table
          :data="pushTableData"
          :header-cell-style="{
            borderColor: '#F0F0F0',
            height: '51px',
            background: '#F0F0F0',
            color: '#333',
          }"
          :row-style="{ height: '51px' }"
          :cell-style="{ borderColor: '#F0F0F0' }"
          style="width: 100%"
        >
          <el-table-column prop="id" label="ID" width="60" align="center">
          </el-table-column>
          <el-table-column prop="title" label="推送标题" align="center">
          </el-table-column>
          <el-table-column prop="content" label="推送内容" align="center">
          </el-table-column>
          <el-table-column prop="type" label="推送类型" align="center">
            <template slot-scope="scope">{{
              scope.row.type == 1 ? "全部推送" : "定向推送"
            }}</template>
          </el-table-column>
          <el-table-column prop="taskid" label="成功id" align="center">
          </el-table-column>
          <el-table-column prop="created_at" label="推送日期" align="center">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="150">
            <template slot-scope="scope">
              <el-button
                @click="handleCheck(scope.row)"
                type="text"
                size="small"
                >查看</el-button
              >
              <el-button
                @click="handleOneClickUse(scope.row)"
                type="text"
                size="small"
                >一键使用</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="page_box">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryParams.pageNow"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="queryParams.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
      <!-- 新增弹窗 -->
      <el-dialog
        title="新增"
        :visible.sync="dialogVisiblePush"
        :close-on-click-modal="false"
        width="30%"
      >
        <div class="dialog_add_box">
          <el-form
            :model="ruleFormPush"
            ref="pushRuleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="推送方式" prop="type">
              <!-- <el-input v-model="ruleFormPush.type"></el-input> -->
              <el-radio
                v-model="ruleFormPush.type"
                :label="item.value"
                v-for="item in typeList"
                :key="item.value"
              >
                {{ item.name }}
              </el-radio>
            </el-form-item>

            <el-form-item label="推送标题" prop="title">
              <el-input
                v-model="ruleFormPush.title"
                placeholder="请输入推送标题"
              ></el-input>
            </el-form-item>

            <el-form-item label="推送内容" prop="content">
              <el-input
                v-model="ruleFormPush.content"
                placeholder="请输入推送内容"
              ></el-input>
            </el-form-item>

            <el-form-item
              label="填写方式"
              prop="push_cid_type"
              v-if="ruleFormPush.type == 2"
            >
              <el-radio
                v-model="ruleFormPush.push_cid_type"
                :label="item.value"
                v-for="item in uploadTypeList"
                :key="item.value"
              >
                {{ item.name }}
              </el-radio>
            </el-form-item>
            <el-form-item
              label="用户cid"
              prop="cid"
              v-if="ruleFormPush.type == 2 && ruleFormPush.push_cid_type == 1"
            >
              <el-input
                v-model="ruleFormPush.cid"
                placeholder="请输入用户cid，可用逗号隔开"
              ></el-input>
            </el-form-item>

            <el-form-item
              label="上传表格"
              prop="cid_csv"
              v-else-if="
                ruleFormPush.type == 2 && ruleFormPush.push_cid_type == 2
              "
            >
              <el-button type="primary" @click="uploadFileTwo()"
                >点击上传cid文件</el-button
              >
              <input
                type="file"
                @change="handleChangeFile"
                ref="refuploadFile"
                style="display: none"
              />
            </el-form-item>

            <el-form-item
              label="上传表格"
              prop="userid_csv"
              v-else-if="
                ruleFormPush.type == 2 && ruleFormPush.push_cid_type == 3
              "
            >
              <el-button type="primary" @click="uploadFileThree()"
                >点击上传userId文件</el-button
              >
              <input
                type="file"
                @change="handleChangeFileUserId"
                ref="refuploadFileUserId"
                style="display: none"
              />
            </el-form-item>

            <el-form-item
              label="标签推送"
              prop="tag"
              v-else-if="
                ruleFormPush.type == 2 && ruleFormPush.push_cid_type == 4
              "
            >
              <div style="display: flex; flex-direction: column">
                <el-select
                  v-model="ruleFormPush.tag"
                  placeholder="请选择标签"
                  :clearable="true"
                  style="width: 220px"
                >
                  <el-option
                    v-for="item in tagOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>

                <el-input
                  v-model.number="ruleFormPush.select_day"
                  placeholder="请输入天数"
                  style="width: 220px; margin-top: 10px"
                  @change="handleChangeSelectDay"
                  onkeyup="value=(value.replace(/\D/g,'')==''?'':parseInt(value))"
                  oninput="if(value > 30) value = 30; if(value < 1 || value == '' || value == null) value = 1;"
                >
                  <template slot="append">天</template>
                </el-input>
              </div>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="cancelDialog">取 消</el-button>
          <el-button type="primary" @click="sureDialog">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 查看全部推送数据弹窗 -->
      <el-dialog
        title="查看全部推送数据"
        :visible.sync="checkDialogVisible"
        width="40%"
        :close-on-click-modal="false"
      >
        <div class="select_box">
          <el-select v-model="checkSelectVal">
            <el-option
              v-for="item in checkSelectOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="dialog_check_box">
          <el-table
            :data="tableDataCheck"
            :header-cell-style="{
              borderColor: '#F0F0F0',
              height: '51px',
              background: '#F0F0F0',
              color: '#333',
            }"
            :row-style="{ height: '51px' }"
            :cell-style="{ borderColor: '#F0F0F0' }"
            style="width: 100%"
          >
            <div v-if="checkSelectVal == 'total'">
              <el-table-column prop="total.target_num" label="消息下发数">
              </el-table-column>
              <el-table-column prop="total.receive_num" label="消息接收数">
              </el-table-column>
              <el-table-column prop="total.msg_num" label="消息可下发数">
              </el-table-column>
              <el-table-column prop="total.display_num" label="消息展示数">
              </el-table-column>
              <el-table-column prop="total.click_num" label="消息点击数">
              </el-table-column>
            </div>

            <div v-else-if="checkSelectVal == 'xm'">
              <el-table-column prop="xm.target_num" label="小米消息下发数">
              </el-table-column>
              <el-table-column prop="xm.receive_num" label="小米消息接收数">
              </el-table-column>
              <el-table-column prop="xm.display_num" label="小米消息展示数">
              </el-table-column>
              <el-table-column prop="xm.click_num" label="小米消息点击数">
              </el-table-column>
            </div>

            <div v-else-if="checkSelectVal == 'op'">
              <el-table-column prop="op.target_num" label="OPPO消息下发数">
              </el-table-column>
              <el-table-column prop="op.receive_num" label="OPPO消息接收数">
              </el-table-column>
              <el-table-column prop="op.display_num" label="OPPO消息展示数">
              </el-table-column>
              <el-table-column prop="op.click_num" label="OPPO消息点击数">
              </el-table-column>
            </div>

            <div v-else-if="checkSelectVal == 'vv'">
              <el-table-column prop="vv.target_num" label="VIVO消息下发数">
              </el-table-column>
              <el-table-column prop="vv.receive_num" label="VIVO消息接收数">
              </el-table-column>
              <el-table-column prop="vv.display_num" label="VIVO消息展示数">
              </el-table-column>
              <el-table-column prop="vv.click_num" label="VIVO消息点击数">
              </el-table-column>
            </div>

            <div v-else-if="checkSelectVal == 'apn'">
              <el-table-column prop="apn.target_num" label="IOS消息下发数">
              </el-table-column>
              <el-table-column prop="apn.receive_num" label="IOS消息接收数">
              </el-table-column>
              <el-table-column prop="apn.display_num" label="IOS消息展示数">
              </el-table-column>
              <el-table-column prop="apn.click_num" label="IOS消息点击数">
              </el-table-column>
            </div>

            <div v-else-if="checkSelectVal == 'gt'">
              <el-table-column prop="gt.target_num" label="个推消息下发数">
              </el-table-column>
              <el-table-column prop="gt.receive_num" label="个推消息接收数">
              </el-table-column>
              <el-table-column prop="gt.display_num" label="个推消息展示数">
              </el-table-column>
              <el-table-column prop="gt.click_num" label="个推消息点击数">
              </el-table-column>
            </div>
          </el-table>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { pushAppMessage, getPushAppMessageList } from "@/api/messagePush";
export default {
  data() {
    return {
      pushTableData: [],
      dialogVisiblePush: false,
      ruleFormPush: {
        type: "1",
        push_cid_type: "1",
        title: "",
        content: "",
        cid: "",
        cid_csv: "",
        userid_csv: "",
        tag: "",
        select_day: "",
      },
      selectDayNum: "",
      typeList: [
        {
          name: "全部推送",
          value: "1",
        },
        {
          name: "定向推送",
          value: "2",
        },
      ],
      uploadTypeList: [
        {
          name: "手动填写",
          value: "1",
        },
        {
          name: "上传cid文件",
          value: "2",
        },
        {
          name: "上传userId文件",
          value: "3",
        },
        {
          name: "标签推送",
          value: "4",
        },
      ],
      typeOptions: [
        {
          name: "全部推送",
          value: "1",
        },
        {
          name: "定向推送",
          value: "2",
        },
      ],
      searchType: "",
      queryParams: {
        pageNow: 1,
        pageSize: 10,
      },
      total: null,
      checkDialogVisible: false,
      tableDataCheck: [],
      checkSelectVal: "total",
      checkSelectOptions: [
        {
          label: "全部",
          value: "total",
        },
        {
          label: "小米",
          value: "xm",
        },
        {
          label: "OPPO",
          value: "op",
        },
        {
          label: "VIVO",
          value: "vv",
        },
        {
          label: "IOS",
          value: "apn",
        },
        {
          label: "个推",
          value: "gt",
        },
      ],
      // 标签推送下拉栏
      tagOptions: [
        {
          value: "refund_apply_kf_time",
          label: "咨询返费客服时间",
        },
        {
          value: "package_kf_time",
          label: "咨询套餐客服时间",
        },
        {
          value: "activate_kf_time",
          label: "咨询激活客服时间",
        },
        {
          value: "fxuser_page_time",
          label: "浏览分销员页面时间",
        },
        {
          value: "agent_page_time",
          label: "浏览合伙人页面时间",
        },
        {
          value: "become_fxuser_time",
          label: "成为分销员时间",
        },
        {
          value: "become_agent_time",
          label: "成为合伙人时间",
        },
        {
          value: "refund_apply_page_time",
          label: "浏览返费页面时间",
        },
        {
          value: "package_page_time",
          label: "浏览套餐页面时间",
        },
        {
          value: "goods_page_time",
          label: "浏览商品页面时间",
        },
        {
          value: "broadband_page_time",
          label: "浏览宽带页面时间",
        },
        {
          value: "smallshop_page_time",
          label: "浏览小店页面时间",
        },
        {
          value: "become_fxuser_page_time",
          label: "浏览招募分销员页面时间",
        },
        {
          value: "activate_page_time",
          label: "点击激活时间",
        },
      ],
      dateObj: {
        beginDate: "",
        endDate: "",
      },
      selectDayType: "number",
      // 4fbe5129afcd23e2a02d6f0704d5515b
    };
  },
  mounted() {
    this.getPushAppMessageList();
  },
  methods: {
    // 输入框天数限制
    handleChangeSelectDay() {
      if (this.ruleFormPush.select_day > 30) {
        this.$message.warning("请输入小于等于30天");
        this.ruleFormPush.select_day = "";
        return;
      } else {
      }
    },

    // 日期选择
    handleChangeDate(e) {
      this.getDiffDay(e[0], e[1]);
    },

    getDefaultTime() {
      const that = this;
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      that.select_day.time[0] = that.formatDate(start);
      that.select_day.time[1] = that.formatDate(end);
    },

    // 计算两个日期之间的天数
    getDiffDay(date_1, date_2) {
      // 计算两个日期之间的差值
      let totalDays, diffDate;
      let myDate_1 = Date.parse(date_1);
      let myDate_2 = Date.parse(date_2);
      // 将两个日期都转换为毫秒格式，然后做差
      diffDate = Math.abs(myDate_1 - myDate_2); // 取相差毫秒数的绝对值
      totalDays = Math.floor(diffDate / (1000 * 3600 * 24)); // 向下取整
      this.selectDayNum = totalDays;
      return totalDays; // 相差的天数
    },

    // 上传表格
    uploadFileTwo(e) {
      // 当点击button按钮后会触发此事件
      // 作用就是打开文件上传弹框
      this.$refs.refuploadFile.click();
    },

    uploadFileThree() {
      this.$refs.refuploadFileUserId.click();
    },

    handleChangeFile(e) {
      // 选中文件后，会触发input的change事件，即会进入此函数
      let formData = new FormData();
      // this.$refs.uploadFile2是vue中获取dom元素的方法
      // 通过files就可以拿到所有上传的文件，如果是多个文件循环即可
      // 必须设置请求类型
      formData.append("type", this.ruleFormPush.type);
      // 如果需要传id的情况下，参考下面代码
      formData.append("title", this.ruleFormPush.title);
      formData.append("content", this.ruleFormPush.content);
      formData.append("push_cid_type", this.ruleFormPush.push_cid_type);
      formData.append("cid_csv", this.$refs.refuploadFile.files[0]);
      // 配置完成后，只需要向后台传入formData 变量即可
      pushAppMessage(formData).then((res) => {
        if (res.code == 1) {
          this.$message.success(res.msg);
          this.dialogVisiblePush = false;
          this.ruleFormPush.type = "1";
          this.ruleFormPush = {};
          this.getPushAppMessageList();
        } else {
          this.$message.error(res.msg);
          return;
        }
      });
    },

    // 上传userId文件
    handleChangeFileUserId(e) {
      this.ruleFormPush.type = 3;
      // 选中文件后，会触发input的change事件，即会进入此函数
      let formData = new FormData();
      // this.$refs.uploadFile2是vue中获取dom元素的方法
      // 通过files就可以拿到所有上传的文件，如果是多个文件循环即可
      // 必须设置请求类型
      formData.append("type", this.ruleFormPush.type);
      // 如果需要传id的情况下，参考下面代码
      formData.append("title", this.ruleFormPush.title);
      formData.append("content", this.ruleFormPush.content);
      formData.append("push_cid_type", this.ruleFormPush.push_cid_type);
      formData.append("userid_csv", this.$refs.refuploadFileUserId.files[0]);
      // 配置完成后，只需要向后台传入formData 变量即可
      pushAppMessage(formData).then((res) => {
        if (res.code == 1) {
          this.$message.success(res.msg);
          this.dialogVisiblePush = false;
          this.ruleFormPush.type = "1";
          this.ruleFormPush = {};
          this.getPushAppMessageList();
        } else {
          this.$message.error(res.msg);
          return;
        }
      });
    },

    // 推送消息查询
    getPushAppMessageList() {
      getPushAppMessageList({
        page_now: this.queryParams.pageNow,
        page_size: this.queryParams.pageSize,
        type: this.searchType,
      }).then((res) => {
        if (res.code == 1) {
          this.pushTableData = res.data;
          this.total = res.page_info.total_count;
        } else {
          this.$message.error(res.msg);
          return;
        }
      });
    },

    // 推送消息接口
    pushAppMessage() {
      pushAppMessage({
        type: this.ruleFormPush.type,
        title: this.ruleFormPush.title,
        content: this.ruleFormPush.content,
        cid_list: this.ruleFormPush.cid,
        push_cid_type: this.ruleFormPush.push_cid_type,
        tag: this.ruleFormPush.tag,
        select_day: this.selectDayNum,
      }).then((res) => {
        if (res.code == 1) {
          this.$message.success(res.msg);
          this.dialogVisiblePush = false;
          this.ruleFormPush.type = "1";
          this.ruleFormPush = {};
          this.getPushAppMessageList();
        } else {
          this.$message.error(res.msg);
          return;
        }
      });
    },

    // 搜索
    handleSearch() {
      this.getPushAppMessageList();
    },

    // 新增
    handleAdd() {
      this.dialogVisiblePush = true;
    },

    // 新增弹窗-确定
    sureDialog() {
      if (this.ruleFormPush.type == "1") {
        if (this.ruleFormPush.title == "") {
          this.$message.error("请输入推送标题");
          return;
        } else if (this.ruleFormPush.content == "") {
          this.$message.error("请输入推送内容");
          return;
        } else {
          this.pushAppMessage();
        }
      } else {
        if (this.ruleFormPush.title == "") {
          this.$message.error("请输入推送标题");
          return;
        } else if (this.ruleFormPush.content == "") {
          this.$message.error("请输入推送内容");
          return;
        } else if (
          this.ruleFormPush.push_cid_type == "1" &&
          this.ruleFormPush.cid == ""
        ) {
          this.$message.error("请输入用户cid");
          return;
        } else if (
          this.ruleFormPush.push_cid_type == "2" &&
          this.ruleFormPush.cid_csv == ""
        ) {
          this.$message.error("请上传文件");
          return;
        } else {
          this.pushAppMessage();
        }
      }
    },

    // 新增弹窗-取消
    cancelDialog() {
      this.dialogVisiblePush = false;
      this.ruleFormPush.type = "1";
      this.ruleFormPush.push_cid_type = "1";
      this.ruleFormPush.title = "";
      this.ruleFormPush.content = "";
      this.ruleFormPush.cid = "";
      this.ruleFormPush.cid_csv = "";
      this.ruleFormPush.userid_csv = "";
      this.ruleFormPush.tag = "";
      this.ruleFormPush.select_day = "";
    },

    // 查看
    handleCheck(val) {
      if (val.type == 1) {
        let arr = [];
        let response = JSON.parse(val.response);
        for (var i in response) {
          arr.push(response[i]);
        }
        this.tableDataCheck = arr;
        this.checkDialogVisible = true;
      } else {
        let arr = [];
        let arr2 = [];
        let response = JSON.parse(val.response);
        for (var i in response) {
          arr.push(response[i]);
        }
        arr.forEach((item) => {
          if (item == "successed_offline") {
            arr2.push(item);
          }
        });
        this.$notify({
          title: "成功",
          message: "成功定向推送：" + arr2.length + "条",
          type: "success",
        });
      }
    },

    // 一键使用
    handleOneClickUse(val) {
      this.ruleFormPush.type = String(val.type);
      this.ruleFormPush.title = val.title;
      this.ruleFormPush.content = val.content;
      this.dialogVisiblePush = true;
    },

    // 分页
    handleSizeChange(val) {
      this.queryParams.pageNow = 1;
      this.queryParams.pageSize = val;
      this.getPushAppMessageList();
    },
    handleCurrentChange(val) {
      this.queryParams.pageNow = val;
      this.queryParams.pageSize = 10;
      this.getPushAppMessageList();
    },
  },
};
</script>
<style lang="scss" scoped>
.message_push_box {
  .search_box {
    display: flex;
    padding-bottom: 15px;

    .search_btn {
      margin-left: 10px;
    }
  }

  .add_box {
    padding-bottom: 30px;
  }

  .page_box {
    display: flex;
    justify-content: center;
    padding: 20px 0;
  }

  .select_box {
    padding-bottom: 20px;
  }

  ::v-deep .el-dialog__body {
    padding: 10px 20px 20px;
  }
}
</style>
